<template>
    <div class="homeBrand">
        <!-- 筛选搜索 -->
        <div class="search_box">
            <el-row>
                <el-col :span="21" class="left_search">
                    <el-icon :size="16" color="#444545" style="vertical-align: middle;">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </el-col>
                <el-col :span="3" class="right_search">
                    <el-button @click="clearSearch">重置</el-button>
                    <el-button type="primary" @click="fetch">查询搜索</el-button>
                </el-col>
            </el-row>
            <el-row class="input_search">
                <span>品牌名称：</span>
                <el-input autocomplete="false" placeholder="品牌名称" v-model="paramsToSend.brandName" />
                <span>推荐状态：</span>
                <el-select v-model="paramsToSend.recommendStatus" placeholder="全部">
                    <el-option label="未推荐" value="0" />
                    <el-option label="推荐中" value="1" />
                </el-select>
            </el-row>

        </div>
        <!-- 数据列表 -->
        <div class="oprations_box">
            <div class="left_search">
                <el-icon :size="16" color="#444545" style="vertical-align: middle;">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right_btn">
                <el-button @click="showFromDialogFn">
                    选择品牌
                </el-button>
            </div>
        </div>
        <!-- 品牌列表 -->
        <el-table ref="multipleTableRef" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
            :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center', height: '50px' }" border>
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" width="120">
                <template #default="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column property="brandName" label="品牌名称" width="700" />
            <el-table-column label="是否推荐">
                <template #default="{ row }">
                    <el-switch v-model="row.recommendStatus" :active-value="1" :inactive-value="0"
                        @change="switchChange(row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column property="sort" label="排序" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="状态" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.recommendStatus == 1 ? '推荐中' : '未推荐' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" link @click="showSortDialogFn(row)">设置排序</el-button>
                    <el-button type="primary" link @click="delAdvertise(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 左侧下拉操作 -->
        <div class="select_hand">
            <el-select v-model="batchVal" placeholder="批量操作">
                <el-option label="设为推荐" value="0" />
                <el-option label="取消推荐" value="1" />
                <el-option label="删除" value="2" />
            </el-select>
            <el-button type="primary" @click="batchFn">确定</el-button>
        </div>
        <!-- 添加品牌对话框 -->
        <SelectBrand ref="selectBrand_ref" @close="closeFromDialogFn" />
        <!-- 设置排序框 -->
        <Sort :id="sortId" :sort="sortSort" ref="sort_ref" @close2="closeSortDialogFn" @update-sort="fetch" />
        <!-- 分页 -->
        <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]"
            :total="total" />
    </div>
</template>
<script setup lang='ts'>
import { ApiQueryBrandList, ApiDelHomeBrand, ApiUpdateRecommendStatus } from '@/http/api'
import useTable from '@/hooks/useTable';
import { reactive, ref } from 'vue';
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import SelectBrand from './components/selectBrand.vue'
import Sort from './components/Brandsort.vue'
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'
const searchParams = reactive({
    brandName: '',
    recommendStatus: '',
    pageSize: 5
})

let paramsToSend = reactive({ ...searchParams }) // 先复制一份，以免影响到原有数据
// 避免传递空数据
Object.keys(paramsToSend).forEach((key) => {
    const k = key as keyof typeof searchParams; // 进行类型断言，指定 key 的类型为 "endTime"、"name"、"type" 或 "pageSize"
    if (paramsToSend[k] === '') {
        delete paramsToSend[k];
    }
});

let selectBrand_ref = ref<any>(null)
let sort_ref = ref<any>(null)


// 显示选择品牌列表
const showFromDialogFn = () => {
    selectBrand_ref.value.show = true
}

// 隐藏选择品牌列表
const closeFromDialogFn = () => {
    selectBrand_ref.value.show = false
}

const sortId = ref<number>(0)
const sortSort = ref<number>(0)
// 显示排序框
const showSortDialogFn = (sort: IQueryBrandList) => {
    sortId.value = sort.id
    sortSort.value = sort.sort
    sort_ref.value.show = true
}
// 隐藏排序框
const closeSortDialogFn = () => {
    sort_ref.value.show = false
}

// 清空搜索栏
const clearSearch = () => {
    Object.assign(paramsToSend, searchParams)
}

// 批量操作的数据
const batchVal = ref<string>('')
// 批量操作数据的id
const batchId = ref<number[] | number>([])

// 选中数据change事件
const multipleSelection = ref<IAdvertiseListModel[]>([])
const handleSelectionChange = (val: IAdvertiseListModel[]) => {
    multipleSelection.value = val
    batchId.value = val.map(item => {
        return item.id
    })
}

// 批量操作事件
const batchFn = () => {
    switch (batchVal.value) {
        case '0':
            switchChange({ id: batchId.value, recommendStatus: 1 })
            break;
        case '1':
            switchChange({ id: batchId.value, recommendStatus: 0 })
            break;
        case '2':
            delAdvertise(batchId.value)
            break;
    }


}

// 是否推荐事件
const switchChange = (brand: any) => {
    ElMessageBox.confirm('是否要修改推荐状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        ApiUpdateRecommendStatus({ ids: brand.id, recommendStatus: brand.recommendStatus }).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '修改成功！'
                })
                fetch()
            } else {
                brand.recommendStatus = brand.recommendStatus === 1 ? 0 : 1
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'success',
            message: '已取消操作'
        })
        brand.recommendStatus = brand.recommendStatus === 1 ? 0 : 1
    })
}



// 删除品牌
const delAdvertise = (id: number | number[]) => {
    ElMessageBox.confirm('是否要删除该推荐?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        ApiDelHomeBrand(id).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                fetch()
            }
        })
    }).catch(() => {
    })


}

const { list, pageNum, pageSize, total, fetch } = useTable(ApiQueryBrandList, paramsToSend)

</script>
<style lang="less" scoped>
.homeBrand {
    .search_box {
        padding: 20px;
        box-shadow: 0 0 4px 2px #eee;
        margin-bottom: 20px;
        border-radius: 2px;
        // 二十四、将搜索框部分粘性定位到顶部
        position: sticky;
        top: -20px;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.9);

        // 右边按钮
        .right_search {
            display: flex;
            align-items: center;
            justify-content: right;
        }

        .input_search {
            display: flex;
            align-items: center;

            span {
                font-size: 14px;
                color: #606266;
                margin-left: 30px;
            }

            .el-input {
                width: 200px;
            }
        }
    }

    .oprations_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        box-shadow: 0 0 4px 2px #eee;
        margin-bottom: 20px;
        border-radius: 2px;
    }

    .select_hand {
        margin-top: 20px;
        float: left;

        .el-button {
            margin-left: 20px;
        }
    }

    .picImg {
        width: auto;
        object-fit: cover;
    }
}
</style>
